<section ng-init="loadPosts()">
    <div class="row">
        <div class="col-md-8">
            <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group mr-2">
                    <a href="/portal/Page-data/details/{{activedData.id}}" class="btn btn-secondary">
                        <i class="fas fa-plus"></i>
                    </a>
                    <a href="/portal/Page/details/{{activedData.id}}" class="btn btn-secondary">
                        <i class="fas fa-pen"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
        </div>
    </div>
    <filter-list request="postRequest" callback="loadPosts()"></filter-list>

    <table class="table table-sm table-hover" cellspacing="0" ng-if="pageData.posts.totalItems > 0">
        <thead class="thead-light">
            <tr>
                <th scope="col" style="width: 3%;">
                    <small class="fa fa-grip-vertical text-black-50 align-middle"></small>
                </th>
                <th scope="col" style="width: 4%;">
                    <span class="fa fa-grip-vertical text-black-50-numeric-down"></span>
                </th>
                <th scope="col" style="width: 25%;">
                    Title
                </th>
                <th scope="col" width="10%">
                    Image
                </th>
                <th scope="col" width="10%">
                    Created Date
                </th>
                <th scope="col" style="width: 10%;">
                    Author
                </th>

                <th scope="col" style="width: 5%;"></th>
            </tr>
        </thead>

        <tbody class="sortable">
            <tr ng-repeat="item in pageData.posts.items track by $index" class="sortable-item" sort-model="post"
                sort-model-id="{{item.post.id}}">
                <td style="cursor:grab;" class="drag-header">
                    <small class="fa fa-grip-vertical text-black-50 align-middle"></small>
                </td>
                <td>
                    <input type="text" value="{{item.post.priority}}" class="item-priority form-control form-control-sm d-inline"
                        style="width:40px;">
                </td>
                <td>
                    {{item.post.title}}
                </td>
                <td>
                    <div ng-if="item.post.image!=''">
                        <img height="50" ng-src="{{item.post.imageUrl}}">
                    </div>
                    <small>
                        <span ng-bind-html="item.post.excerpt"></span>
                    </small>
                </td>
                <td>
                    <small>
                        {{item.post.createdDateTime | utcToLocal}}
                    </small>
                </td>
                <td>
                    {{item.post.createdBy}}
                </td>

                <td>
                    <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                        <a href="/portal/post/details/{{item.post.id}}" class="btn btn-dark">
                            <span class="fas fa-pen text-primary"></span>
                        </a>
                        <a href="{{item.post.detailsUrl}}" target="_blank" class="btn btn-dark">
                            <span class="fas fa-eye text-info"></span>
                        </a>

                        <button type="button" class="btn btn-dark del-popover" ng-click="removePost(item.post.id)">
                            <span class="fas fa-trash-alt text-danger"></span>
                        </button>
                        <div class="popover-body d-none">
                            <a href="/{{currentLanguage}}/portal/posts/delete/{{item.post.id}}" class="btn btn btn-danger">Yes,
                                I want to delete!</a>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</section>